<template>
  <div class="base-info-edit">
    <div class="avatar">
      <img :src="info.avatar"/>
      <a @click="handlePick">上传照片</a>
    </div>
    <div class="clearfix">
      <div class="left">
        <div class="input-group clearfix">
          <div class="left-title">
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
          </div>
          <div class="right-content">
            <el-input size="small" v-model="info.username"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
          </div>
          <div class="right-content">
            <el-select
              size="small"
              v-model="info.sex"
              placeholder="性别"
              style="width:100%;"
            >
              <el-option
                v-for="item,i in sexs"
                :key="i"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            出生日期：
          </div>
          <div class="right-content">
            <el-date-picker
              size="small"
              style="width:100%;"
              v-model="info.birthday"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            毕业院校：
          </div>
          <div class="right-content">
            <el-input size="small" v-model="info.graduate_from"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            现教阶段：
          </div>
          <div class="right-content">
            <el-select
              size="small"
              v-model="info.teach_section"
              placeholder="现教阶段"
              style="width:100%;"
            >
              <el-option
                v-for="item,i in sections"
                :key="i"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            机构学校：
          </div>
          <div class="right-content">
            <el-input size="small" v-model="info.school"></el-input>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="input-group clearfix">
          <div class="left-title">
            最高学历：
          </div>
          <div class="right-content">
            <el-input size="small" v-model="info.education"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            教&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
          </div>
          <div class="right-content">
            <el-input size="small" v-model="info.job_age">
              <template slot="append">年</template>
            </el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            教师职称：
          </div>
          <div class="right-content">
            <el-input size="small" v-model="info.job_level"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
             个人简介：
          </div>
          <div class="right-content">
            <el-input type="textarea" size="small" v-model="info.intro"></el-input>
          </div>
        </div>
        <!-- <div class="input-group clearfix">
          <div class="left-title">
             荣誉称号：
          </div>
          <div class="right-content">
            <el-input type="textarea" size="small" v-model="info.intro"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
             教学特点：
          </div>
          <div class="right-content">
            <el-input type="textarea" size="small" v-model="info.intro"></el-input>
          </div>
        </div> -->
      </div>
    </div>
    <div class="btn-group">
      <button class="gray-btn" @click="cancel">取消</button>
      <button class="common-btn" @click="confirm">确认</button>
    </div>
  </div>
</template>

<script>
import { editUser } from 'api/user'
import pick from 'utils/file/picker'
import moment from 'moment'

// const mock = {
//   birthday: "string",
//   graduate_from: "string",
//   school: "string",
//   teach_section: "string",
//   sex: "string",
//   education: "string",
//   job_age: "string",
//   job_level: "string",
//   intro: "string",
//   idcard_url: "string",
//   idcard_no: "string",
//   style: "string",
//   good_at: "string"
// }

export default {

  name: 'index',

  data() {
    return {
      sexs: [
        { label: '男', value: 'M' },
        { label: '女', value: 'W' }
      ],
      sections: [
        { label: '小学', value: 0 },
        { label: '初中', value: 1 },
        { label: '高中', value: 2 },
        { label: '大学', value: 3 }
      ],
      info: {
        username: '',
        sex: '',
        birthday: '',
        graduate_from: '',
        teach_section: '',
        school: '',
        education: '',
        job_age: '',
        job_level: '',
        intro: ''
      }
    };
  },
  created() {
    this.$store.dispatch('GetInfo')
    .then(res => {
      if (res.extra) {
        this.info = {
          ...this.info,
          ...res.info,
          ...res.extra.profile
        }
      } else {
        this.info = {
          ...this.info,
          ...res.info
        }
      }
      console.log(this.info)
    })
    .catch(err => console.log(err))
  },
  methods: {
    cancel() {
      this.$router.go(-1)
    },
    confirm() {
      editUser({
        username: this.info.username,
        sex: this.info.sex,
        graduate_from: this.info.graduate_from,
        teach_section: this.info.teach_section,
        school: this.info.school,
        education: this.info.education,
        job_age: this.info.job_age,
        job_level: this.info.job_level,
        intro: this.info.intro,
        birthday: this.info.birthday ? moment(this.info.birthday).format('YYYY-MM-DD') : '',
        avatar: this.file ? this.file : this.info.avatar
      })
      .then(res => {
        console.log(res)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.$router.go(-1)
      })
      .catch(err => console.log(err))
    },
    handlePick() {
      pick()
      .then(file => {
        this.file = file
        this.info.avatar = window.URL.createObjectURL(file)
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.base-info-edit{
  .avatar{
    width: 180px;
    margin: 0 auto;
    position: relative;
    img{
      width: 100%;
    }
    a{
      &:hover{
        text-decoration: underline;
        color: #00A2EA;
      }
      position: absolute;
      right: -55px;
      bottom: 16px;
    }
  }
  .left{
    float: left;
    width: 50%;
    border-right: 1px solid #e5e6e7;
  }
  .right{
    float: left;
    width: 50%;
  }
  .input-group{
    width: 325px;
    margin: 0 auto;
    margin-bottom: 14px;
    .left-title{
      width: 90px;
      float: left;
      line-height: 30px;
      text-align: right;
    }
    .right-content{
      width: 235px;
      line-height: 30px;
      float: left;
    }
  }
  .btn-group{
    margin: 80px auto;
    text-align: center;
    >button{
      height: 40px;
      width: 140px;
    }
  }
}
</style>